<template>


	<view class="price">
		<text class="unit">￥</text>
		<text class="amount">{{payAmount/ 100}}</text>
	</view>
	<text class="title">{{product.name}} 1 次</text>
	<view class="tab">
		<view class="gbs">
			<image src="../../static/laba.png" mode=""></image>
			<text>SUV/MPV 使用小车券需要另付门店5元</text>
		</view>
		<view class="select">
			<view class="car-item" :class="{'car-item-active': beforeOrder.type==0}" @click="onSelect(0)">
				<text class="l1">5座轿车</text>
				<text class="l2">小车</text>
				<image src="../../static/select.png" mode=""></image>
			</view>
			<view class="car-item" :class="{'car-item-active': beforeOrder.type==1}" @click="onSelect(1)">
				<text class="l1">SUV/MPV</text>
				<text class="l2">大车</text>
				<image src="../../static/select.png" mode=""></image>
			</view>
		</view>
	</view>
	<view class="box">
		<view class="item">
			<text class="label">订单价格</text>

			<text class="amount">￥{{product.salePrice / 100}}</text>
		</view>
		<view class="item" @click="bindCouponSelect">
			<text class="label">优惠</text>

			<view class="right-box">
				<text class="placeholder">￥{{activityReduction/100}}</text>
				<image class="right" src="/static/right.png" mode=""></image>
			</view>
		</view>
	</view>
	<button class="btn" @click="submit">支付</button>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app'
	import {
		orderPreClean,
	} from '@/api'
	import {
		wxOpenid,
		sendCreateOrder,
		debounce
	} from '@/utils/login-sdk.js'
	const beforeOrder = ref({
		type: '',
		memberId: "",
		productInfoId: "",
		openId: "",

	})
	const product = ref()
	const activityReduction = ref(0)
	const payAmount = ref(0)
	const coupon = ref([])
	onLoad(async () => {
		const {
			memberId,
			openId
		} = await wxOpenid()
		product.value = uni.getStorageSync('carWashPay')
		console.log(product.value)
		beforeOrder.value.productInfoId = product.value.id
		beforeOrder.value.memberId = memberId
		beforeOrder.value.openId = openId
		beforeOrder.value.type = '0'
		payAmount.value = product.value.salePrice
	})
	onShow(()=>{
		uni.$on('selectCoupon',list=>{
			console.log(product.value)
			if(list&&list.length){
				coupon.value = []
				if(list[0].couponType==0){
					let sum = 0
					list.map(item=>{
						sum+=item.preAmount
						coupon.value.push(item.id)
					})
					activityReduction.value = sum
					payAmount.value = product.value.salePrice-activityReduction.value
				}else{
					coupon.value = [list[0].id]
					const discountValue = list[0].discountValue/10
					activityReduction.value = product.value.salePrice - (product.value.salePrice*discountValue)
					payAmount.value = product.value.salePrice-activityReduction.value
					 
				}
				
			}else{
				coupon.value = []
				activityReduction.value = 0
				payAmount.value = product.value.salePrice
			}
		})
	})

	/** 支付*/
	const submit =  debounce(async() => {
		uni.showLoading({
			mask:true,
		})
		const res = await orderPreClean(beforeOrder.value)
		const orderParams = {
			preOrderId: res.result.preOrderId,
			orderAmount: product.value.salePrice,
			payAmount: payAmount.value,
			couponIds: coupon.value.toString(),
			memberId: beforeOrder.value.memberId,
			activityReduction: activityReduction.value,
			openId: beforeOrder.value.openId,
			storeId: product.value.storeId,
			businessType: "2"
		}
		sendCreateOrder(orderParams,res.result.token)

	},2000)
	/** 选择 车辆类型*/
	const onSelect = (index) => {
		beforeOrder.value.type = index
	}
	/** 选择 优惠券*/
	const bindCouponSelect = () => {
		uni.navigateTo({
			url: '/pages/ccouponSelect/ccouponSelect?businessType=2&orderAmount='+product.value.salePrice+'&coupon='+coupon.value.toString()
		})
	}
</script>

<style lang="scss">
	page {
		background: #F7F4F0;
	}

	.price {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		text-align: center;
		line-height: 0;
		margin-top: 150rpx;
		margin-bottom: 23rpx;

		.unit {
			line-height: 1;
			color: #000;
			font-weight: bold;
			font-size: 34rpx;
			vertical-align: bottom;
			display: block;
		}

		.amount {
			line-height: 56rpx;
			color: #000;
			font-weight: bold;
			font-size: 72rpx;
			vertical-align: bottom;
			display: block;
		}
	}

	.title {
		display: block;
		text-align: center;
		font-size: 26rpx;
		color: #2B2B2B;
		margin-bottom: 113rpx;
	}

	.tab {
		.gbs {
			background: #FFE3C2;
			display: flex;

			border-radius: 28rpx;
			padding: 30rpx 30rpx 0;
			width: 640rpx;
			margin: 0 auto;
			height: 120rpx;

			image {
				width: 28rpx;
				height: 27rpx;
				display: block;
				margin-right: 15rpx;

			}

			text {
				font-size: 26rpx;
				color: #FF9413;
			}
		}

		.select {
			background: #fff;
			border-radius: 28rpx;
			padding: 30rpx;
			margin: -34px auto 20rpx;
			width: 640rpx;
			display: flex;
			justify-content: space-between;

			.car-item {
				width: 291rpx;
				height: 153rpx;
				background: #F6F6F6;
				border-radius: 13rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;

				.l1 {
					color: #545454;
					font-size: 32rpx;
					font-weight: bold;
				}

				.l2 {
					color: #9C9C9C;
					font-size: 26rpx;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					bottom: 12rpx;
					right: 30rpx;
					display: none;
				}

			}

			.car-item-active {
				background: #FFFAF3;

				.l1 {
					color: #522D00;
					font-size: 32rpx;
					font-weight: bold;
				}

				.l2 {
					color: #E6A24E;
					font-size: 26rpx;
				}

				image {
					display: block;
				}
			}
		}
	}

	.box {
		width: 640rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		margin: 20px auto;
		padding: 0 30rpx;

		.item {
			height: 99rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.label {
				display: block;
				font-size: 28rpx;
				color: #2B2B2B;
				width: 220rpx;
			}

			.right {
				display: block;
				width: 48rpx;
				height: 48rpx;
			}

			.amount {
				font-size: 30rpx;
				color: #2B2B2B;
			}

			.right-box {
				display: flex;
				align-items: center;

				text {
					color: #A7A7A7;
					font-size: 26rpx;
					// margin-right: 26rpx;
				}
			}
		}
	}

	.btn {
		width: 640rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #FFC53D 0%, #FE9B23 51%, #FFC53D 100%);
		box-shadow: 4rpx 12rpx 18rpx 0rpx rgba(254, 155, 35, 0.25);
		border-radius: 28rpx;
		font-weight: bold;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 100rpx;

		position: absolute;
		bottom: 120rpx;
		left: 55rpx;

	}
</style>